<template>
	<div>
		<div classs="searchTitle">
			<input class="search" type="text" placeholder="搜索" @click="toSearchPage()">
		</div>
		
		<view class="Classification">
			<view class="ClassItem" v-for="item in goodtype" @click="toClassItem(item.sort)">
				<img  class="ClassItemImg" :src="item.icon" />
				<button class="ClassItemButton">{{item.name}}</button>
			</view>
		</view>
		
		<div class="Item" v-for="itemData in Goods">
			<image @click="ToGood(itemData.id)" class="itemImage" :src="itemData.images" ></image>
			<p class="itemContent">{{itemData.name}}</p>
			<p class="itemMoney">${{itemData.price}}</p>
		</div>
		<view style="clear: both;"></view>
		<view style="height: 5vw;margin-top: 10vw;"></view>
		<foot activeBtn = '2'></foot>
	</div>
</template>

<script>
	import foot from "../../component/foot.vue"
	var Goods = null
	var goodtype = null
	
	export default{
		name: 'buy',
		components:{
			'foot':foot
		},
		data(){
			return{
			goodtype:goodtype,
			Goods:Goods
			}
		},
		onLoad:function(){
			getApp().globalData.GoodIndex = '1'
			uni.request({
				url: "http://" + getApp().globalData.IpAddr + "/goods-type",
				method:"GET",
				header:{	'authorization':getApp().globalData.token	},
				success:res=> {
					if(!res.data.success) wx.showToast({	title: '发送请求失败',	duration: 2000	})
					else {
						getApp().globalData.GoodsType = res.data.data
						this.goodtype = getApp().globalData.GoodsType
					}
				}
			})
			uni.request({
				url: "http://" + getApp().globalData.IpAddr + "/goods/list/" + getApp().globalData.GoodIndex,
				method:"GET",
				header:{	'authorization':getApp().globalData.token	},
				success:res=> {
					if(!res.data.success) wx.showToast({	title: '发送请求失败',	duration: 2000	})
					else {
						getApp().globalData.Goods = res.data.data
						this.Goods = getApp().globalData.Goods
					}
				}
			})
		},
		onReachBottom(){
			getApp().globalData.GoodIndex = Number(getApp().globalData.GoodIndex) +1

			uni.request({
				url: "http://" + getApp().globalData.IpAddr + "/goods/list/" + getApp().globalData.GoodIndex,
				method:"GET",
				header:{	'authorization':getApp().globalData.token	},
				success:res=> {
					getApp().globalData.cache = null
					getApp().globalData.cache = res.data.data
					// console.log(res)
					var length = this.Goods.length
					for (var key  = 0 ; key < getApp().globalData.cache.length ; key ++){
							this.Goods[length + key] = getApp().globalData.cache[key]
					}
				}
			})
		},
		methods:{
			toSearchPage(){
				getApp().globalData.SearchClass = '2'
				uni.navigateTo({
					url: '/pages/ext/searchPage'
				}).catch((e) => {console.log(e)})
			},
			toClassItem(id){
				getApp().globalData.NowTypeGoods = id
				uni.navigateTo({	url: "/pages/ext/ClassIn"	})
			},
			ToGood(id){
				getApp().globalData.goodsId = id
				uni.navigateTo({	url: "/pages/ext/commodity"	})
			}
		}
	}
</script>

<style>
	.Item{
		width: 40vw;
		height: 50vw;
		padding: 5vw;
		float: left;
	}
	.itemImage{
		width: 100%;
		height: 40vw;
	}
	.itemContent{
		text-align: center;
		max-width: 45vw;
		font-size: 10px;
		-webkit-line-clamp: 2;
	}
	.itemMoney{
		text-align: left;
		margin-top: 3vw;
	}
	.searchTitle{
		display: block;
		width: 100vw;
		height: 28px;
		line-height: 28px;
		padding-left: 30px;
		
	}
	.search{
		display: block;
		border :1px solid #e6e6e6;
		border-radius: 20px;
		background-color: #ffffff;
		padding: 5px;
		padding-left: 5vw;
	}
	.ClassItem{
		width: 25vw;
		margin: 0vw;
		float: left;
	}
	.ClassItemButton{
		width: 80%;
		padding: 0px;
		font-size: 10px;
	}
	.ClassItemButton::after{
		border: none;
	}
	.ClassItemImg{
		width: 17vw;
		height: 14vw;
		display: block;
		margin: 0 auto
	}
</style>